<template>
    <main-wrap :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="userBox">
            <div class="min-box" v-if="userDetail">
            <div class="info">
                <div class="himgBox" v-if="userDetail.walletAddress">
                    <div class="avBg" :style="{'background-image': `url(${userDetail.headImage})`}">
                        <upload-file v-model="userDetail.headImage" :showClose="false" type="img" @success='updateUserInfo'/>
                    </div>
                </div>
                <!-- <h5 @click="nickname=userDetail.userName;showFlag=true">{{userDetail.userName}}</h5>
                <div class="link" v-if="userAddress">{{userAddress}}</div>
                <div class="dw" v-if="currentPosition.location">
                   <span>
                        <i class="iconfont icon-ditu-dibiao"></i> {{currentPosition.location}}
                   </span> 
                </div> -->
            </div>
             <div class="right-box">
                <!-- <div class="himgBox" v-if="userDetail.walletAddress">
                    <div class="avBg" :style="{'background-image': `url(${userDetail.headImage})`}">
                        <upload-file v-model="userDetail.headImage" :showClose="false" type="img" @success='updateUserInfo'/>
                    </div>
                </div> -->
                <div class="title" v-t="'my.text1'">Account Name</div>
                <div class="name" @click="nickname=userDetail.userName;showFlag=true">{{userDetail.userName}}</div>

                <div class="title" v-if="userDetail.isAdvertiser" v-t="'my.text3'">Identity</div>
                <div class="name">
                    <span  v-if="userDetail.isAdvertiser" v-t="'my.text4'">Advertisers</span>
                    <span  v-if="userDetail.shopId" class="right-text" v-t="'my.text5'">Brand</span>
                </div>
                <div class="title" v-if="userAddress" v-t="'my.text2'">Wallet Address</div>
                <div class="name" v-if="userAddress">{{userAddress}}</div>
                 <div class="title" v-if="currentPosition.location" v-t="'my.text6'">Location</div>
                <div class="dw" v-if="currentPosition.location">
                   <span>
                        <i class="iconfont icon-ditu-dibiao"></i>ChongQIng {{currentPosition.location}}
                   </span> 
                </div>
                <div class="btn-clean" @click="btnClean"></div>
            </div>
            </div>
        </div>
        <my-dailog v-model:show="showFlag" :styleType="20" :showtopclose="true">
            <cut-border-box>
                <div class="user-nickname">
                    <div class="choushoutypetitle" v-t="'my.text7'">Modify Nickname</div>
                    <div class="nciput">
                        <my-input placeholder='Please enter your nickname' v-model="nickname"/>
                    </div>
                    <div class="csfsBtnBox">
                        <div class="csfsBtnItem"> <span @click="showFlag=false" v-t="'my.btn1'">Cancel</span> </div>
                        <div class="csfsBtnItem"> <span @click="updateNickname" v-t="'my.btn2'">Confirm</span> </div>
                    </div>
                </div>
            </cut-border-box>
        </my-dailog>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import back from "@/components/back.vue";
import sort from '@/components/sort.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import uploadFile from '@/components/uploadFile.vue';
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
import myInput from '@/components/myInput.vue';
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        back,
        sort,
        mySearch,
        Image,
        uploadFile,
        cutBorderBox,
        myDailog,
        myInput
    },
    setup(){
        const store = useStore()
        const {t} = useI18n()
        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            currentPosition:computed(()=>store.state.base.currentPosition),
            userAddress:'',
            showFlag:false,
            nickname:'',
            userDetail:null
        })

        onMounted(async ()=>{
            setTimeout(()=>{getUserInfo()},3000)
        })

        const getUserInfo = async()=>{
            const res = await store.dispatch('base/get_user_info',state.userInfo.walletAddress) // 获取货币之间的兑换比例
            //console.log("userInfo:",state.userInfo)
            state.userDetail = res.data || {}
        }

        const updateUserInfo = async (url)=>{
            const res = await store.dispatch('base/update_user_info',{
                walletAddress:state.userInfo.walletAddress,
                headImage:url
            }) 
            if(res.success){
                getUserInfo()
            }else{
                toast(t('my.tip1'))
            }
        }
        const updateNickname = async()=>{
            const res = await store.dispatch('base/update_user_info',{
                walletAddress:state.userInfo.walletAddress,
                userName:state.nickname,
            }) 
            if(res.success){
                getUserInfo()
                state.showFlag = false
            }else{
                 toast(t('my.tip2'))
            }
        }

        state.userAddress = computed(()=>{
            const str = state.userInfo.walletAddress
            if(str){
                const srt1 = str.substr(0,8)
                const srt2 = str.substr(str.length-8,8)
                return srt1+'......'+srt2
            }else{
                return ''
            }
        })

        const btnClean = async()=>{
               H5CallAPPFuction('clearCache')
        }
        
        return {
            ...toRefs(state),
            updateUserInfo,
            updateNickname,
            btnClean
        }
    }
}
</script>

<style lang="scss" scoped>
    .userBox{
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        .min-box{
            display: flex;
            align-items: flex-start;
            justify-content: center;
        .right-box,
        .info{
            display: inline-block;
            text-align: center;
            line-height: normal; 
            .himgBox{
                display: inline-block;
                position: relative;
                z-index: 10;
                width: 320px;
                height: 300px;
                background: url(/images/home/avbg1.png) left top no-repeat;
                background-size:100% 100% ;
                padding: 12px;
                .avBg{
                    width: 100%;
                    height: 100%;
                    background-position: left top;
                    background-repeat: no-repeat;
                    background-size:cover ;
                    border-top-right-radius: 70px;
                    border-bottom-left-radius: 70px;
                    overflow: hidden;
                    .uploadBtn{
                        background: none;
                    }
                }
            }
            h5{
               font-size: 54px;
               padding: 0;
               margin: 15px 0;
               text-align: center;
            }
            .link{
                display: inline-block;
                height:70px ;
                line-height: 70px;
                background: rgba(12,132,217,0.8);
                border-radius:35px;
                padding:0 30px;
                font-size: 36px;
                font-weight: 500;
                margin: 13px 0 0 0;
            }
            .dw{
                span{
                    display: inline-flex;
                    align-items: center;
                    font-size: 40px;
                    font-weight: bold;
                    color: rgba(103,248,255,0.9000);
                    padding: 20px 0 0 0;
                    i{
                        padding: 0 10px 0 0;
                    }
                }
                
            }
        }
        .right-box{
            background-image: url('/images/dgbg4.png');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            width:700px;
            height:auto;
            margin-left:30px;
            padding:30px;
            text-align: left;
            .title{
                font-size:22px;
            }
            .name{
                font-size:28px;
                padding-bottom:20px;
                .right-text{
                    padding-left:30px;
                }
            }
            .btn-clean{
                background-image: url('/images/clean.png');
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                height:60px;
                width:200px;
            }
        }
       }
    }
    .user-nickname{
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #FFFFFF;
        line-height: normal;
        padding: 30px ;
        min-height: 300px;
        min-width: 800px;
        .csfsBtnBox{
            display: flex;
            padding: 10px 0 0 0;
            .csfsBtnItem{
                flex: 1;
                font-family: Poppins-SemiBold, Poppins;
                font-size: 26px;
                color: #FFFFFF;
                width: 300px;
                margin: 0;
                span{
                    display: block;
                    height: 90px;
                    line-height: 90px;
                    text-align: center;
                    background: rgba(103,248,255,0.1);
                    border: 1px solid rgba(103,248,255,0.5);
                    
                }
                &+.csfsBtnItem{
                    margin-left:30px;
                }
            }
        }
        .nciput{
            margin: 0 0 30px 0;
            .itemFormBox{
                height: 90px;
            }
        }
    }
 
</style>